<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">>
<head>
    <meta charset="UTF-8">
    <title>用户列表</title>

    <link rel="stylesheet" th:href="@{/layui/css/layui.css}">
    <link rel="stylesheet" th:href="@{lib/css/main.css}">
    <link rel="stylesheet" th:href="@{/lib/css/public.css}">

    <script th:src="@{/lib/js/jquery-3.4.1.min.js}"></script>
    <script th:src="@{/layui/layui.js}"></script>
    <!--<script th:src="@{/lib/js/allstudent.js}"></script>-->



</head>




<body>
<!--<div th:replace="menu/left :: leftbar" ></div>-->
<!--<div th:replace="menu/top :: topbar"></div>-->


<div class="table">
    <h2 class="tablename">宠物信息</h2>
    <hr class="layui-bg-gray">
<table class="layui-hide" id="demo" lay-filter="test"></table>


    <div class="layui-fluid">
        <div class="layui-row layui-col-space15">
            <div class="layui-col-md12">
                <div class="layui-card">
                    <div class="layui-card-body ">
                        <!--<form class="layui-form layui-col-space5">-->
                            <!--<div class="layui-inline layui-show-xs-block">-->
                                <!--<input class="layui-input"  autocomplete="off" placeholder="开始日" name="start" id="start">-->
                            <!--</div>-->
                            <!--<div class="layui-inline layui-show-xs-block">-->
                                <!--<input class="layui-input"  autocomplete="off" placeholder="截止日" name="end" id="end">-->
                            <!--</div>-->
                            <div class="layui-inline layui-show-xs-block">
                                <input type="text" name="username" th:value="${name}" id="studentname" placeholder="请输入宠物的名字" autocomplete="off" class="layui-input">
                            </div>
                            <div class="layui-inline layui-show-xs-block">
                                <button class="layui-btn" onclick="index()" lay-submit="" lay-filter="sreach"><i class="layui-icon">&#xe615;</i></button>
                            </div>
                        <!--<div class="layui-inline layui-show-xs-block">-->
                            <!--<img src="/images/petimg/921b06df-c08c-40f4-872f-f461e763cee1.jpg"/>-->
                        <!--</div>-->
                        <!--</form>-->
                    </div>
                    <!--<div class="layui-card-header">-->
                        <!--<button class="layui-btn layui-btn-danger" onclick="delAll()"><i class="layui-icon"></i>批量删除</button>-->
                        <!--<button class="layui-btn" onclick="xadmin.open('添加用户','./admin-add.html',600,400)"><i class="layui-icon"></i>添加</button>-->
                    <!--</div>-->
                    <div class="layui-card-body ">
                        <table class="layui-table layui-form">
                            <thead>
                            <tr>


                                <th>宠物姓名</th>
                                <th>种类</th>
                                <th>类型</th>
                                <th>照片</th>
                                <th>操作</th>
                            </thead>
                            <tbody>
                            <div th:each="j:${list.list}">
                            <tr>

                                <td th:text="${j.petName}">1</td>
                                <td th:text="${j.petZhonglei}">admin</td>
                                <td th:text="${j.petType}">18925139194</td>
                                <!--<td><img th:src="@{(${j.imgUrl})}"/></td>-->
                                <td><img  th:src="@{'/images/petimg/'+${j.imgUrl}}"/></td>
                                <td>
                                    <!--<a title="编辑"  onclick="xadmin.open('编辑','admin-edit.html')" href="javascript:;">-->
                                        <!--<i class="layui-icon">&#xe642;</i>-->
                                    <!--</a>-->
                                    <a title="删除" th:onclick="|javascript:delpet('${j.id}')|" href="javascript:;">
                                <i class="layui-icon">&#xe640;</i>
                                </a>
                                </td>
                                </tr>
                            </div>
                            </tbody>
                        </table>
                    </div>
                    <div class="layui-card-body ">
                        <div class="page">
                            <div>
                            当前页: [[${list.pageNum}]] 总页数：[[${list.pages}]] 总条数：[[${list.total}]] <a class="layui-btn layui-btn-normal layui-btn-radius" href="#" onclick="index()">首页</a>    <a href="#" class="layui-btn layui-btn-normal layui-btn-radius" onclick="shangyiye()">上一页</a> <a class="layui-btn layui-btn-normal layui-btn-radius" id="pagenext"  href="#" onclick="xiayiye()" >下一页</a> <a class="layui-btn layui-btn-normal layui-btn-radius" href="#" onclick="wenye()">尾页</a>
                        </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

</div>
<script>

    function delpet(id) {
        if (confirm("您确定要删除吗")) {
            $.ajax({
                url:"/delpetid",
                data:{"id":id},
                success:function(){
                        alert("删除成功！")
                       window.location.reload();
                },
                error:function(){
                    alert("系统内部出现问题,请联系技术人员！")
                }
            })
        }
    }

    //首页
    function index(){
        //name
        var  name =  $("#studentname").val()
        //首页
        var pageNum= 1;
        location.href="/ipet?pageNum="+pageNum+"&name="+name;
    }

    //上一页
    function shangyiye(){
        var  name =  $("#studentname").val()
        //上一页
        var  shangy =  [[${list.prePage}]]

        location.href="/ipet?pageNum="+shangy+"&name="+name;
    }

    //下一页
    function xiayiye(){

        var pageNum = [[${list.pageNum}]]

        var info = [[${list.pages}]]
        //当前页等于总条数的时候就是最后一页！
        if(pageNum == info){
            alert("亲，已经是最后一页了！")
            return false;
        }
        var  name =  $("#studentname").val()
        //下一页
        var xiay =  [[${list.nextPage}]]
        location.href="/ipet?pageNum="+xiay+"&name="+name;
    }

    //尾页
    function wenye(){
        var  name =  $("#studentname").val()
        //  //尾页
        var wenye =  [[${list.pages}]]
        location.href="/ipet?pageNum="+wenye+"&name="+name;
    }


</script>


</body>

</html>